<!--客服消息回复弹窗-->
<template>
    <el-dialog
        title="客服回复"
        :visible.sync="visible"
        :close-on-click-modal="false"
    >
        <el-tabs v-model="msgType" style="height: 400px;overflow: auto;">
            <el-tab-pane label="文本" name="text">
                <el-form v-model="contents.text" label-width="80px">
                    <el-form-item label="文本内容">
                        <el-input v-model="contents.text" type="textarea"/>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图片" name="image">
                <el-form v-model="contents.image" label-width="80px">
                    <el-form-item label="图片素材">
                        <el-input
                            v-model="contents.image.media_id"
                            placeholder="请选择图片素材"
                            @focus="() => $refs.image_.visible = true"
                        />
                        <mater-select-dialog
                            ref="image_"
                            mater-type="image"
                            @selected="data => contents.image.media_id = data.mediaId"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="语音" name="voice">
                <el-form v-model="contents.voice" label-width="80px">
                    <el-form-item label="音乐素材">
                        <el-input
                            v-model="contents.voice.media_id"
                            placeholder="请选择语音素材"
                            @focus="() => $refs.voice_.visible = true"
                        />
                        <mater-select-dialog
                            ref="voice_"
                            mater-type="voice"
                            @selected="data => contents.voice.media_id = data.mediaId"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="音乐" name="music">
                <el-form v-model="contents.music" label-width="80px">
                    <el-form-item label="音乐地址">
                        <el-input
                            v-model="contents.music.music_url"
                            placeholder="请输入音乐地址"
                        />
<!--                        <mater-select-dialog-->
<!--                            ref="music_musicUrl"-->
<!--                            mater-type="music"-->
<!--                            @selected="data => contents.music.music_url = data.music_url"-->
<!--                        />-->
                    </el-form-item>
                    <el-form-item label="高品质">
                        <el-input
                            v-model="contents.music.hq_music_url"
                            placeholder="请输入高品质音乐地址"
                        />
<!--                        <mater-select-dialog-->
<!--                            ref="music_hqMusicUrl"-->
<!--                            mater-type="music"-->
<!--                            @selected="data => contents.music.hq_music_url = data.hq_music_url"-->
<!--                        />-->
                    </el-form-item>
                    <el-form-item label="封面图片">
                        <el-input
                            v-model="contents.music.thumb_media_id"
                            placeholder="请选择封面图片"
                            @focus="() => $refs.music_thumbImg.visible = true"
                        />
                        <mater-select-dialog
                            ref="music_thumbImg"
                            mater-type="image"
                            @selected="data => contents.music.thumb_media_id = data.mediaId"
                        />
                    </el-form-item>
                    <el-form-item label="说明">
                        <el-input
                            v-model="contents.music.description"
                            placeholder="请输入歌曲说明"
                        />
                    </el-form-item>
                    <el-form-item label="标题">
                        <el-input
                            v-model="contents.music.title"
                            placeholder="请输入歌曲标题信息"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="视频" name="video">
                <el-form v-model="contents.video" label-width="80px">
                    <el-form-item label="视频素材">
                        <el-input
                            v-model="contents.video.media_id"
                            placeholder="请选择视频素材"
                            @focus="() => $refs.video_.visible = true"
                        />
                        <mater-select-dialog
                            ref="video_"
                            mater-type="video"
                            @selected="data => contents.video.media_id = data.mediaId"
                        />
                    </el-form-item>
                    <el-form-item label="封面素材">
                        <el-input
                            v-model="contents.video.thumb_media_id"
                            placeholder="请选择封面素材"
                            @focus="() => $refs.music_thumbImg.visible = true"
                        />
                        <mater-select-dialog
                            ref="music_thumbImg"
                            mater-type="image"
                            @selected="data => contents.video.thumb_media_id = data.mediaId"
                        />
                    </el-form-item>
                    <el-form-item label="说明">
                        <el-input
                            v-model="contents.video.description"
                            placeholder="请输入视频说明"
                        />
                    </el-form-item>
                    <el-form-item label="视频标题">
                        <el-input
                            v-model="contents.video.title"
                            placeholder="请输入视频标题"
                        />
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="图文" name="news">
               <el-form v-model="contents.news" label-width="80px">
                   <el-form-item label="素材ID">
                       <el-input
                           v-model="contents.news.media_id"
                           placeholder="请选择图文素材"
                           @focus="() => $refs.news_.visible = true"/>
                       <mater-select-dialog
                           ref="news_"
                           mater-type="news"
                           @selected="data => contents.news.media_id = data.mediaId"
                       />
                   </el-form-item>
               </el-form>
            </el-tab-pane>
            <el-tab-pane label="图文（外链）" name="news_link">
                <el-form v-model="contents.news_link" label-width="80px">
                    <template v-for="(item,index) in contents.news_link">
                        <el-form-item label="标题">
                            <el-input v-model="item.title"
                                placeholder="请输入图文标题"
                            />
                        </el-form-item>
                        <el-form-item label="说明">
                            <el-input v-model="item.description" placeholder="请输入图文说明"/>
                        </el-form-item>
                        <el-form-item label="跳转地址">
                            <el-input v-model="item.url" placeholder="请输入消息跳转地址"/>
                        </el-form-item>
                        <el-form-item label="图片链接">
                            <el-input v-model="item.picurl" placeholder="请输入封面图片地址"/>
                        </el-form-item>
                        <el-button @click="() => contents.news_link.splice(index,1)">删除</el-button>
                    </template>
                </el-form>
                <el-button @click="() => contents.news_link.push({})">新增</el-button>
            </el-tab-pane>
        </el-tabs>
        <template slot="footer">
            <el-button type="primary" @click="handlerReplyClick">发送</el-button>
            <el-button @click="visible = false">取消</el-button>
        </template>
    </el-dialog>
</template>

<script>
import MaterSelectDialog from "@/components/dialog/wx/materSelectDialog";
import {sendServiceMsg} from "@/api/wx";
export default {
    name:"msgReply",
    components: {MaterSelectDialog},
    data(){
        return {
            msgType:'text',
            openIds:'',
            contents:{
                text:'',
                image:{},
                voice:{},
                music:{},
                video:{},
                news:{},
                news_link:[]
            },
            visible:false
        }
    },
    methods:{
        /**
         * 回复按钮点击事件
         */
        handlerReplyClick(){
            let content = {
                msg_type:this.msgType,
                open_id:this.openIds,
                content:this.contents[this.msgType]
            }
            console.log("请求参数",content)
            sendServiceMsg(JSON.stringify(content))
            .then(res => {
                if(res.data){
                    this.$message.success('发送成功')
                }
            })
            .catch(error => {
                console.warn(error)
                this.$message.warning('发送失败')
            })
        },
        init(openids){
            this.openIds = openids
            this.visible = true
        }
    }
}
</script>
<style scoped>
</style>